<script lang="ts" setup>
	import { computed } from 'vue';

	interface IProps {
		openDateTime: Date | string | number;
	}

	defineOptions({
		name: 'DetailOpenDateTime',
	});

	const props = defineProps<Partial<IProps>>();

	const openDateTime = computed(() => {
		if (!props.openDateTime) {
			return '-';
		}

		const d = new Date(props.openDateTime);

		const currentYear = d.getFullYear();
		const currentMonth = d.getMonth() + 1;
		const currentDate = d.getDate();

		const currentHour = d.getHours();
		const currnetMinute = d.getMinutes();
		const currentSecond = d.getSeconds();

		return `${currentYear}年${currentMonth}月${currentDate}日 ${currentHour}:${currnetMinute}:${currentSecond}`;
	});
</script>

<template>
	<div class="datetime-bd">
		<span class="iconfont icon-datetime"></span>
		<span class="datetime">{{ openDateTime }}</span>
	</div>
</template>

<style lang="scss" scoped>
	.datetime-bd {
		display: flex;
		align-items: center;
		min-height: .44rem;
		padding: .1rem .15rem;
		background-color: #fff;
		border-bottom: 1px solid #ddd;
		box-sizing: border-box;

		.icon-datetime {
			font-size: .18rem;
			margin-right: .1rem;
			color: #999;
		}

		.datetime {
			font-size: .14rem;
			line-height: .18rem;
		}
	}
</style>